<template>
    <!-- 放置地图容器 -->
    <div class="map" ref="chart" style="width: 660px;height: 530px"></div>
</template>

<script setup >
    import { ref, onMounted ,reactive,defineProps,watch,defineEmits } from "vue";
    // 引入echarts
    import * as echarts from "echarts";
    import {searchInfo} from "../../../api/farmer";

    // 引入地图json数据
    import cityMap from '../../../assets/json/city.json'
    import  axios from "axios";
    const chart =ref();//dom的引用
    let map='河北省';

    //父组件传递的数据
    const {deliverCode,deliverName}=defineProps({//父传子参数
        deliverCode:{
            type:String
        },
        deliverName:{
            type:String
        }
    })
    const deliver=reactive({name:"河北省",code:"130000"});
    const form =reactive({city: '', county: '', town: '',village:'',firstid:""})


    //显示数据参数
    // 医疗问题
    const alldata=reactive([])
    const Medical=reactive([])
    // 水利问题
    const Water=reactive([])
    // 住房问题
    const Housing=reactive([])
    // 紧急情况
    const Emergency=reactive([])
    // 健康问题
    const Health=reactive([])
    // 教育问题
    const Education=reactive([])


    //子向父传
    const emit = defineEmits(['riskMapChanged']);

    // 函数在某个时刻会被调用，需要向父组件传递数据
    const sendDataToParent = () => {
        emit('riskMapChanged', deliver);
    };
    //市
    let city = null;
    // 存储县区
    let county = null;
    // 存储点击的是否是县 0=市 1=县2=镇
    let type = 0;

    //挂载
    onMounted(() => {
        //初始化地图
        clickMap()

    });

    //根据点击获取数据
    const clickMap=()=>{
        //点击事件
        //注册点击事件
        let myChart = echarts.init(chart.value);
        let adcode = null;
        let name=null;
        myChart.on("click", (event) => {
            // 是查找市级 还是查找县级
            console.log("点击相对应的信息")
            console.log("type:"+type)
            console.log(event)
            console.log("点击相对应的信息")
            //行政编码

            if (type%2 == 0) {
                // 市级存在
                adcode=getCode(city,event.name)
            } else if (type %2== 1) {
                adcode=getCode(county,event.name)
            }

            console.log("地区编码")
            console.log(adcode)
            console.log("地区编码")


            // 获取地图
            if(type%2 == 0){
                axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${adcode}_full.json`).then((chinaJson) => {

                    county = chinaJson.data;
                    console.log("点击后对应返回的值")
                    console.log(chinaJson.data)
                    console.log("点击后对应返回的值")
                    // 当前地区等级
                    deliver.name=event.name
                    deliver.code=adcode+'';
                    initChart(event.name,chinaJson.data)

                });
            }
            else{
                deliver.name="河北省"
                deliver.code="130000";
                initChart('河北省',city)
            }
            type++;
        })


    }

    //父引起子变化
    const  faLeadChange=(name,code)=>{
        /*console.log("父引起子变化.............")
        console.log(name)
        console.log(code)
        console.log("父引起子变化.............")*/
        if(code!== '130000') {
            axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${code}_full.json`).then((chinaJson) => {

                county = chinaJson.data;
                // 当前地区等级
                initChart(name, chinaJson.data)

            });
        } else{
            initChart('河北省',city)
        }


    }


    //获取点击地区的编目
    const getCode=(area,name)=>{
        // 查找到上一级的数组坐标
        let num = area.features.findIndex(
            (item) => item.properties.name == name
        );
        console.log(num)
        // 上一级地区的code码
        let adcode = area.features[num].properties.adcode;

        return adcode;
    }

    //配置
    let option=reactive({
        /*title: {
            text: '防返贫监测系统数据分析',
            subtext: '河北省',
            left:'center'
            },*/
        tooltip: {
            show:true,
            trigger: 'item',
            formatter: function(params) {
                let res = params.name+'<br/>';
                let myseries = option.series;
                for (let i = 0; i < myseries.length; i++) {
                    for(let j=0;j<myseries[i].data.length;j++){
                        if(myseries[i].data[j].name==params.name){
                            res+=myseries[i].name +' : '+myseries[i].data[j].value+" (人)"+'</br>';
                        }
                    }
                }
                return res;
            }

        },
        subtextStyle:{
            color:'#ccc',
            fontsize:18,
            fontWeight:'normal',
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: { readOnly: false },
                saveAsImage: {}
            }
        },
        visualMap: {
            min: 0,
            max: 50000,
            text: ['High', 'Low'],
            // dimension: 3, // series.data 的第四个维度（即 value[3]）被映射
            //seriesIndex: 4, // 对第四个系列进行映射。
            realtime: false,
            calculable: true,
            inRange: {
                color: ['lightskyblue', 'yellow', 'red']
            }
        },
        series:[
            {
                type:'map',
                map:map,
                layoutCenter: ["50%", "50%"],
                layoutSize: 500, //地图视图大小
                roam: false, //开启地图缩放和移动
                // roam: { zoom: true, move: false },
                /* name:"各风险类型人数总和",
                 data:alldata,*/
                name:" 医疗问题",
                data:Medical,
                label:{//图形的文本标签
                    show:true,
                    color:'#FFFFFF',
                    fontsize:13
                },
                itemStyle:{//地图区域的多边形 图形样式
                    areaColor:'#529b2e',//区域颜色#d1edc4
                    borderColor:'fff',//边框颜色
                    borderWidth:1
                },
                zoom:1.0,//缩放
                emphasis:{//高亮情况下
                    label:{//图形的文本标签
                        show:true,
                        color:'#000000',
                        fontsize:17
                    },
                    itemStyle:{//地图区域的多边形 图形样式
                        areaColor:'#d1edc4',//区域颜色#d1edc4
                        borderColor:'fff',//边框颜色
                        borderWidth:1
                    },

                }
            },
            {
                name:" 水利问题",
                data: Water
            },
            {
                name:"住房问题",
                data:Housing


            },
            {
                name:"紧急情况",
                data:Emergency
            },
            {
                name:"健康问题",
                data:Health
            }
            ,
            {
                name:"教育问题",
                data:Education
            }

        ]
    })

    //获取河北省地图数据
    axios.get("https://geo.datav.aliyun.com/areas_v3/bound/130000_full.json").then((response) => {
        console.log(response.data)
        city=response.data
        initChart('河北省',response.data);
    });
    const initChart=(name,data)=> {
        sendDataToParent();
        myPage(name,data);
        /* console.log("我的名字")
         console.log(name)*/
        //注册可用的地图
        let myChart = echarts.init(chart.value);
        /* console.log('qubie')
         console.log(cityMap)
         console.log(data)*/
        /* console.log("我的数据")
         console.log(data)*/
        echarts.registerMap(name, data);
        option.series[0].map=name
        //设置配置项
        /*console.log("我的配置")
        console.log(option)*/
        myChart.setOption(option);
        //图表自适应
        window.addEventListener('resize',()=>{
            myChart.resize();
        })
    }




    //计算总贫困人数


    const myPage = async(name,data) => {
        Medical.length=0
        Water.length=0
        Housing.length=0
        Emergency.length=0
        Health.length=0
        Education.length=0
        alldata.length=0

        data.features.forEach(feature => {

            if(name=="河北省"){
                form.city=feature.properties.name
                form.county=''
                for(let i=1;i<=6;i++){
                    getRisk(i,form.city)
                }
            }
            else{
                form.city=''
                form.county=feature.properties.name
                for(let i=1;i<=6;i++){
                    getRisk(i,form.county)
                }
            }

        });



    }


    //获取各贫困等级人数
    const getRisk=async(level,name)=>{
        form.firstid=level+""
        searchInfo(form).then((res) => {
            if(level==1){
                /* [{name:"石家庄市", value:1000},
                     {name:"唐山市", value:300},*/
                Medical.push({name:name,value:res.data.length})
                /* Medical.forEach((item=>{
                     if (item.name ==name) {
                         item.value += res.data.length; // 找到name为"河北省"的项并将其value增加9
                     }else {

                     }
                 }))*/

            }else if(level==2){
                Water.push({name:name,value:res.data.length})
                /* Water.forEach(item => {
                     if (item.name ==name) {
                         item.value += res.data.length; // 找到name为"河北省"的项并将其value增加9
                     }
                 });*/
            } else if(level==3){
                Housing.push({name:name,value:res.data.length})
                /*Housing.forEach(item => {
                    if (item.name ==name) {
                        item.value += res.data.length; // 找到name为"河北省"的项并将其value增加9
                    }
                });*/
                //allPoor.push({name:name,value:num})
            } else if(level==4){
                Emergency.push({name:name,value:res.data.length})
                /*Emergency.forEach(item => {
                    if (item.name ==name) {
                        item.value += res.data.length; // 找到name为"河北省"的项并将其value增加9
                    }
                    else {

                    }
                });*/
            }else if(level==5){
                Health.push({name:name,value:res.data.length})
                /* Health.forEach(item => {
                     if (item.name ==name) {
                         item.value += res.data.length; // 找到name为"河北省"的项并将其value增加9
                     }
                 });*/
            }else if(level==6){
                Education.push({name:name,value:res.data.length})
                /* Education.forEach(item => {
                     if (item.name ==name) {
                         item.value += res.data.length; // 找到name为"河北省"的项并将其value增加9
                     }
                 });*/
            }

        });


    }



</script>

<style scoped >

</style>